<template>
  <ContentWrap>
    <div class="title">磁盘监控</div>
    <hr />
    <div class="data">
      <div ref="dom" style="height: 100%"></div>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { ContentWrap } from '@/components/ContentWrap'
import { getQueryDiskInfo } from '@/api/diskInfo/index'
import * as echarts from 'echarts'

import 'echarts/theme/macarons.js'
const dom: any = ref<HTMLElement | null>(null)

// 定义变量用于接收初始化echarts实例

let myChart: any = ''

// 绘制图表

onMounted(async () => {
  //基于准备好的dom，初始化echarts实例
  let { result } = await getQueryDiskInfo({})
  console.log(result[0].restPPT)
  myChart = echarts.init(dom.value, 'macarons')

  optionsHandler(result[0].restPPT)
})

//专门用于做配置项的方法

const optionsHandler = (val) => {
  // var myChart = echarts.init(document.getElementById("chart"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      show: false,
      feature: {
        restore: {},
        saveAsImage: {}
      }
    },
    // 配置
    series: [
      {
        name: 'CPU使用率',
        type: 'gauge',
        axisLabel: { distance: 0, fontWeight: 100, shadowOffsetY: 100, height: 100 },
        axisLine: {
          lineStyle: {
            width: 10 // 修改仪表盘宽度的属性
          }
        },
        splitLine: {
          //分隔线样式相关
          length: 26, //分割线的长度
          lineStyle: {
            width: 1,
            color: '#b0b3b8'
          }
        },
        title: { offsetCenter: [0, '85%'], color: 'red' },
        detail: {
          formatter: '{value}%',
          offsetCenter: [0, '65%'],
          fontStyle: 'oblique',
          fontSize: 12
        },
        pointer: { width: 4 },
        data: [{ value: val, name: '' }]
      }
    ]
  })
}
</script>

<style lang="less" scoped>
.title {
  padding-bottom: 20px;
}
.data {
  width: 530px;
  height: 550px;
}
</style>
